<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>所有用户页面</title>
    <!--2 引入element ui css样式-->
    <link rel="stylesheet" href="https://unpkg.com/element-ui@2.15.6/lib/theme-chalk/index.css">
</head>
<body>
<!--3 创建div容器,挂载vue实例-->
<div id="app">
    <!--页面内容区域-->
    <el-card>
        <div slot="header" class="clearfix">
            <span>用户列表</span>
            <el-button type="primary" size="mini" @click="onAdd()">注册</el-button>
        </div>
        <el-table
                :data="tableData"
                stripe
                style="width: 100%">
            <el-table-column
                    type="index"
                    prop=""
                    label=""
                    width="50">
            </el-table-column>
            <el-table-column
                    prop="userLoginId"
                    label="账号"
                    align="center"
                    width="200">
            </el-table-column>

            <el-table-column
                    prop="userName"
                    label="姓名"
                    align="center"
                    width="200">
            </el-table-column>
            <el-table-column
                    prop="userType"
                    label="用户类型"
                    align="center"
                    width="200">
                <template slot-scope="scope">
                    <span v-if="scope.row.userType == '0'">系统管理员</span>
                    <span v-if="scope.row.userType == '1'">学生账号</span>
                    <span v-if="scope.row.userType == '2'">裁判账号</span>
                </template>
            </el-table-column>
            <el-table-column
                    prop="email"
                    label="邮箱"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="mobile"
                    label="电话号码"
                    align="center"
                    width="200">
            </el-table-column>
            <el-table-column
                    prop="currentStatus"
                    label="状态"
                    align="center"
                    width="200">
                <template slot-scope="scope">
                    <span v-if="scope.row.currentStatus == '0'">正常</span>
                    <span v-if="scope.row.currentStatus == '1'">禁用</span>
                </template>
            </el-table-column>

        </el-table>
        <!--注册用户对话框-->
        <el-dialog
                width="80%"
                :title="dialog.title"
                :visible.sync="dialog.show"
                :close-on-click-modal='false'
                :close-on-press-escape='false'
                :modal-append-to-body='false'>
            <!--使用el-form组件进行数据添加和修改-->
            <el-form
                    ref="myform"
                    :model="mymodel"
                    label-width="150px"
                    style="margin:10px;width:auto;">
                <el-form-item hidden prop='userId' label="ID:">
                    <el-input type="string" v-model="mymodel.userId"></el-input>
                </el-form-item>
                <el-form-item label="登录账号" required>
                    <el-col :span="15">
                        <el-form-item prop='userLoginId'>
                            <el-input type="string" v-model="mymodel.userLoginId"></el-input>
                        </el-form-item>
                    </el-col>
                </el-form-item>
                <el-form-item label="登录密码" required>
                    <el-col :span="15">
                        <el-form-item prop='currentPassword'>
                            <el-input type="password" v-model="mymodel.currentPassword"></el-input>
                        </el-form-item>
                    </el-col>
                </el-form-item>
                <el-form-item prop='currentPassword2' label="重复密码">
                    <el-col :span="15">
                        <el-input type="password" v-model="mymodel.currentPassword2"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item prop='userType' label="账号类型:">
                    <!--使用label表示值-->
                    <el-radio-group v-model="mymodel.userType">

                        <el-radio-button label="1">学生账号</el-radio-button>

                    </el-radio-group>
                </el-form-item>

                <el-form-item label="姓名" required>
                    <el-col :span="15">
                        <el-form-item prop='userName'>
                            <el-input type="string" v-model="mymodel.userName"></el-input>
                        </el-form-item>
                    </el-col>
                </el-form-item>

                <el-form-item prop='mobile' label="手机号码:">
                    <el-col :span="15">
                        <el-input type="string" v-model="mymodel.mobile"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item prop='email' label="电子邮箱:">
                    <el-col :span="15">
                        <el-input type="string" v-model="mymodel.email"></el-input>
                    </el-col>
                </el-form-item>

                <el-form-item class="text_right">
                    <el-button type="primary" @click='onSubmitAdd("myform")'>保 存</el-button>
                    <el-button @click="dialog.show = false">取 消</el-button>
                </el-form-item>

            </el-form>

        </el-dialog>

    </el-card>
</div>

<!--1 引入js库 要锁定版本-->
<!--1.1 引入vue-->
<script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
<!--1.2 引入element ui-->
<script src="https://unpkg.com/element-ui@2.15.6/lib/index.js"></script>
<!--1.3 引入 axios-->
<script src="https://unpkg.com/axios@0.26.1/dist/axios.min.js"></script>
<!--1.4 引入 自定义js包-->
<script src="../../public/mx-config.js"></script>
<script>
    //4 创建vue实例
    const app = new Vue({
        el: "#app",
        data: function () {
            return {
                tableData: [],
                //控制对话框
                dialog: {
                    title: '',
                    show: false
                },
                dialogEdit: {
                    title: '',
                    show: false
                },
                //定义模型，与表单匹配
                mymodel: {
                    userId: '',
                    userLoginId: '',
                    userName: '',
                    currentPassword: '',
                    currentPassword2: '',
                    email: '',
                    mobile: '',
                    userType: '1',
                    currentStatus: '0'
                },
                //设置一个变量，保存哪行数据被选中了
                selectItemIndex: -1
            }
        },
        mounted: function () {
            //初始化表格
            this.initTable();
        },
        methods: {
            //初始化表格
            initTable: function () {
                //通过axios调用服务器json服务
                axios.get("/user/" + "1").then(res => {
                    this.tableData = res.data;
                });
            },

            //响应添加按钮
            onAdd: function () {
                //清空表单
                this.mymodel = {
                    userId: '',
                    userLoginId: '',
                    userName: '',
                    currentPassword: '',
                    currentPassword2: '',
                    email: '',
                    mobile: '',
                    userType: '1',
                    currentStatus: '0'
                };

                //alert("注册用户");
                this.dialog.title = "注册用户";
                this.dialog.show = true;
            },
            //响应注册用户对话框 保存按钮
            onSubmitAdd: function (form) {
                //把表单数据提交到 后台 ，保存到数据库
                //添加,调用post方法
                axios.post("/user/", this.mymodel).then(res => {
                    // 操作成功
                    this.$message({
                        message: "保存成功！",
                        type: "success"
                    });
                    //方法1:更新table
                    this.tableData.push(res.data);
                    //方法2:更新table:在最后添加一个元素,0表示添加
                    //this.tableData.splice(this.tableData.length,0,res.data);
                    //方法3 重新加载
                    //this.initTable();

                    //关闭对话框
                    this.dialog.show = false;

                });
            },
            //响应修改按钮
            onEdit: function (index) {
                //进行数据回填---通过选中的index获得tableData里面的数据
                this.mymodel = {
                    userId: this.tableData[index].userId,
                    userLoginId: this.tableData[index].userLoginId,
                    userName: this.tableData[index].userName,
                    email: this.tableData[index].email,
                    mobile: this.tableData[index].mobile,
                    userType: this.tableData[index].userType,
                    currentStatus: this.tableData[index].currentStatus
                };

                //保存被选中的行 索引值
                this.selectItemIndex = index;

                //设置对话框可见
                this.dialogEdit.title = '修改用户信息';
                this.dialogEdit.show = true;

            },
            //响应修改对话框 保存按钮
            onSubmitEdit: function (form) {
                //保存到数据库
                axios.put("/user/", this.mymodel).then(res => {
                    // 操作成功
                    this.$message({
                        message: "保存成功！",
                        type: "success"
                    });

                    // 方法1:更新指定索引的元素
                    //this.tableData.splice(this.selectItemIndex, 1, res.data);
                    // 方法2:数据重新从服务器加载table数据,这种方法效率差
                    this.initTable();
                    // 关闭对话框
                    this.dialogEdit.show = false;
                })
            },
            //响应删除按钮
            onDelete: function (index) {
                //删除被选中的数据
                this.$confirm('确认删除该数据吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    // 删除
                    let id = this.tableData[index].userId;
                    axios.delete("/user/" + id).then(res => {
                        if (res.data == 200) {
                            this.$message("删除成功");
                            // 删除table起始下标为1，长度为1的一个值
                            this.tableData.splice(index, 1);
                        }
                    });
                }).catch(() => {

                });

            }
        }
    });

</script>
</body>
</html>